<template>
    <div PosiNeed>
        <div class="need">
            <div class="slogan">招聘职位</div>
            <ul>
                <li v-for="(item, index) in Positions" :key="index">{{ item.recruitName }}</li>
            </ul>
        </div>

    </div>
</template>
<script>
import axios from 'D:\\job_management\\src\\axiosConfig.js'
export default {
    data() {
        return {
            Positions: ['前端开发工程师', '后端开发工程师', '测试工程师', '产品经理', 'UI设计师', '运营专员', '市场专员', '人事专员', '财务专员', '法务专员', '行政专员', '客服专员', '销售专员', '其他'],
        }
    },
    mounted() {
        axios.get(`/seekers/recommend/company_information/recruit/${this.$store.state.companyAccount}/1`,
        ).then(res => {
            //此处应该让他把所有的都给我，而不是分页
            this.Positions.length = res.data.data.length
            console.log(res)
            this.Positions = res.data.data
        }).catch(error => {
            console.log(error);
        })
    },
    methods: {

    }
}
</script>

<style scoped>
.need {
    position: relative;
}

ul {

    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 20px;
}

.slogan {
    position: absolute;
    left: 20px;
    top: 0px;
    font-size: 17px;
    font-weight: 600;
}

li {
    list-style: none;
    font-size: 17px;
    font-weight: 400;
    margin-top: 10px;
    width: 300px;
    height: 100px;
    line-height: 100px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: box-shadow 0.5s ease-in-out, border 0.5s ease-in-out, color 0.1s ease-in-out;
}

li:hover {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    color: rgb(0, 180, 179);

}
</style>